/**
 * 折线图和柱状图
 */

import React from 'react';
import { findDOMNode } from 'react-dom';
import merge from 'lodash/object/merge';
import isEqual from 'lodash/lang/isEqual'
import Highcharts from 'Highcharts';

export default class LineColumnChart extends React.Component {
	static defaultProps = {
		title: '',
		subtitle: '',
		yAxisTitle: ''
	};

	options = {};

	/**
	 * @virtual 获取图表需要的Series数组的虚方法
	 * @return {array} 非横轴数据数组
	 */
	getSeries() {
		return [];
	}

    /**
     * @virtual 获取图表横轴数据
     * @return {array} 横轴数据数组
     */
    getCategories(props) {
        let { dataSource } = props;
        return dataSource.categories;
    }

    componentWillReceiveProps(nextProps, nextState) {
        let { title, subtitle, yAxisTitle, dataSource, height = 400 } = nextProps;
        let series = this.getSeries(nextProps);

        this.options = {
            chart: {
                zoomType: 'xy',
            },
            title: {
                text: title
            },
            subtitle: {
                text: subtitle
            },
            xAxis: [{
                categories: this.getCategories(nextProps), //dataSource.categories,
                crosshair: true
            }],
            yAxis: [{ // Primary yAxis
                labels: {
                    // format: '{value}°C',
                    style: {
                        // color: Highcharts.getOptions().colors[0]
                    }
                },
                title: {
                    text: '',
                    style: {
                        // color: Highcharts.getOptions().colors[0]
                    }
                }
            }, { // Secondary yAxis
                title: {
                    text: '',
                    style: {
                        color: Highcharts.getOptions().colors[1]
                    }
                },
                labels: {
                    format: '{value} %',
                    style: {
                        color: Highcharts.getOptions().colors[1]
                    }
                },
                opposite: true
            }],
            tooltip: {
                shared: true
            },
            series
        };
    }

    componentDidUpdate(prevProps, prevState) {
        let domNode = findDOMNode(this.refs['chartContainer']);

		Highcharts.chart(domNode, this.options);
	}

	shouldComponentUpdate(nextProps, nextState) {
		return !isEqual(nextProps.dataSource, this.props.dataSource);
	}

	constructor(props) {
		super(props);
	}

	render() {
		return (
			<div ref='chartContainer'></div>
		)
	}
}
